<template>
  <div class="overdue-scroll-list">
    <div class="table-title">未缴费列表</div>
    <div class="list-header">
      <div class="header-cell">姓名</div>
      <div class="header-cell">房间号</div>
      <div class="header-cell">缴费类型</div>
      <div class="header-cell">金额</div>
    </div>

    <div
      ref="scrollContainer"
      class="scroll-container"
      :style="{ height: containerHeight + 'px' }"
    >
      <div
        ref="scrollContent"
        class="scroll-content"
        :style="{
          transform: `translateY(${currentOffset}px)`,
          transition: isScrolling ? 'transform 0.5s ease' : 'none'
        }"
      >
        <div
          v-for="(item, index) in displayData"
          :key="index"
          class="list-item"
          :class="{ 'list-item-even': index % 2 === 0 }"
        >
          <div class="cell name-cell">{{ item.name }}</div>
          <div class="cell room-cell">{{ item.roomNumber }}</div>
          <div class="cell type-cell">{{ getPaymentTypeText(item.paymentType) }}</div>
          <div class="cell amount-cell">¥{{ item.amount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'

const props = defineProps({
  // 逾期数据数组
  data: {
    type: Array,
    default: () => []
  },
  // 容器高度
  height: {
    type: Number,
    default: 400
  },
  // 每页显示条数
  itemsPerPage: {
    type: Number,
    default: 5
  },
  // 滚动间隔（毫秒）
  scrollInterval: {
    type: Number,
    default: 3000
  }
})

// 计算容器高度（减去表头高度）
const containerHeight = computed(() => props.height - 40)

// 当前滚动偏移量
const currentOffset = ref(0)
// 是否正在滚动
const isScrolling = ref(false)
// 滚动定时器
const scrollTimer = ref(null)
// 滚动内容高度
const contentHeight = ref(0)

// 显示的数据（用于循环滚动）
const displayData = computed(() => {
  if (props.data.length <= props.itemsPerPage) {
    return props.data
  }
  // 如果数据不足一页，重复数据以实现无缝滚动
  const repeatedData = []
  let count = 0
  while (count < props.itemsPerPage * 2) {
    props.data.forEach(item => {
      if (count < props.itemsPerPage * 2) {
        repeatedData.push(item)
        count++
      }
    })
  }
  return repeatedData
})

// 缴费类型映射
const getPaymentTypeText = (type) => {
  const typeMap = {
    'water': '水费',
    'electricity': '电费',
    'gas': '煤气费',
    'rent': '房租'
  }
  return typeMap[type] || type
}

// 开始自动滚动
const startAutoScroll = () => {
  if (props.data.length <= props.itemsPerPage) return

  scrollTimer.value = setInterval(() => {
    isScrolling.value = true
    currentOffset.value -= 40 // 每次滚动一行的高度

    // 检查是否需要重置滚动位置
    setTimeout(() => {
      if (Math.abs(currentOffset.value) >= contentHeight.value / 2) {
        currentOffset.value = 0
      }
      isScrolling.value = false
    }, 500)
  }, props.scrollInterval)
}

// 停止自动滚动
const stopAutoScroll = () => {
  if (scrollTimer.value) {
    clearInterval(scrollTimer.value)
    scrollTimer.value = null
  }
}

onMounted(() => {
  // 计算内容高度
  contentHeight.value = props.itemsPerPage * 40
  startAutoScroll()
})

onUnmounted(() => {
  stopAutoScroll()
})

// 监听数据变化
watch(() => props.data, () => {
  stopAutoScroll()
  currentOffset.value = 0
  contentHeight.value = props.itemsPerPage * 40
  setTimeout(() => {
    startAutoScroll()
  }, 100)
})
</script>

<style scoped>
.overdue-scroll-list {
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
  justify-self: center;
}

.list-header {
  display: flex;
  height: 40px;
  background: rgba(24, 144, 255, 0.2);
  border-bottom: 1px solid rgba(28, 34, 95, 0.1);
}

.header-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #e6ff00;
  text-shadow: 0 0 5px rgba(230, 255, 0, 0.5);
}

.scroll-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.list-item {
  display: flex;
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.list-item-even {
  background: rgba(255, 255, 255, 0.02);
}

.cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
}

.name-cell {
  justify-content: flex-start;
  padding-left: 16px;
}

.room-cell {
  justify-content: center;
}

.type-cell {
  justify-content: center;
  color: #faad14;
}

.amount-cell {
  justify-content: flex-end;
  padding-right: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.table-title {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #e6ff00;
  text-shadow: 0 0 5px rgba(230, 255, 0, 0.6);
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(28, 34, 95, 0.1);
}
</style>
